<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0,minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="keywords" content="半次元,次元社,第一弹,juju,萌购,dilidili,布丁,bilibili,战舰少女,少女咖啡枪,前线,暖暖,哔哩哔哩,cosplay,女优,欧派,捏他,捏ta,被窝,绝对领域,动画,漫画,弹幕,宅男,声优,梦见,集,萌娘,同人,手游,美图,绅士,阴阳师">
    <meta name="description" content="【难得一见】的二次元虚拟生活平台，绝对不同于“论坛”、“社团”、“同好会”的存在；【美貌绝伦】的移动App，将一成不变的界面以动漫学园的形式呈现，大欧派前辈、死库水学妹都是你可以随意调戏的看板娘。【屈指可数】的GalGame化应用，将一切内容以游戏形式呈现，线下可攻略女主角、线上能组团推主线；【凤毛麟角】般充满惊喜的App，全图随机彩蛋每日不同、神奇Gacha活动好礼连连，一不小心就会收到霓虹国寄来的惊喜；【名列前茅】的二次元综合信息网，新番漫画美图音乐展会悉数涵盖，更有珍稀资源专供作为老司机的你；【实力强劲】的dalao级行业地位，与各种漫展、演唱会、旅行团、手办销售、游戏厂商都有一腿，优惠福利应有尽有。">
    <link rel="shortcut icon" href="../public/img/x-icon.png">
	<link rel="bookmark" href="../public/img/x-icon.png" type="image/x-icon">
    <link rel="apple-touch-icon-precomposed" href=".../public/img/x-icon.png">
    <title>Kira - 你的二次元生活，动漫新番资源福利社区</title>
    <link rel="stylesheet" href="../public/css/reset.css">
    <link rel="stylesheet" href="../public/css/swiper-4.2.6.min.css">
    <link rel="stylesheet" href="../public/css/font-awesome.min.css">
    <link rel="stylesheet" href="../public/css/com.css">
</head>
<body>
    <div  id="app" class="wrap index" v-cloak>
        <public-header :status="header"></public-header>
        <div class="content body-content">
            <!-- 板报 -->
            <div class="recommend">
                <!-- swiper-no-swiping 禁止用户手动滚动 -->
                <div class="swiper-container swiper-no-swiping">
                    <div class="swiper-wrapper">
                        <div v-for="item in banner" class="swiper-slide">
                            <a href="#">
                                <image-item :src="item.bg.path"></image-item>
                                <!-- <img src="../public/img/temp2.jpg" alt=""> -->
                            </a>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <ul class="recommend-right">
                    <li v-for="item in topDoc" :title="item.title" >
                        <a href="#">
                            <image-item :src="item.image"></image-item>
                            <p>{{ item.title }}</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 推广 -->
            <div class="promote">
                <div class="left-content">
                    <h2>
                        <div class="title"><img src="../public/img/icon-promote.png" alt="" class="icon" width="31" height="33"><span>推广</span></div>
                        <div class="detail"><span><i class="fa fa-refresh"></i>换一批</span><a href="#">进去逛逛<i class="fa fa-angle-right"></i></a></div>
                    </h2>
                    <ul class="list">
                        <li v-for="(item,key) in includes" v-if="key < 5">
                            <a href="#">
                                <div class="img-contet">
                                    <image-item :src="item.image.path"></image-item>
                                    <div class="info">
                                        <image-item :src="item.userIcon.path"></image-item>
                                        <span>{{ item.userName }}</span>
                                    </div>
                                </div>
                                <p class="description">{{ item.title }}</p>
                                <div class="view-comments">
                                    <span class="view"><i></i>{{item.likes}}</span>
                                    <span class="comments"><i></i>{{item.comments}}</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <div class="resources"><img src="../public/img/temp4.png" alt="" width="880" height="120"></div>
                </div>
                <div class="right-content contribution">
                    <h2>今日贡献榜</h2>
                    <ul class="list contribution-list">
                        <li v-for="(item,key) in contribution">
                            <a href="#" :data-num="key+1">
                                <image-item :src="item.headPath"></image-item>
                                <!-- <img :src="item.headPath" alt=""> -->
                                <span>{{ item.nickName }}</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 社团 -->
            <div class="community">
                <div class="left-content">
                    <h2>
                        <div class="title"><img src="../public/img/icon-community.png" alt="" class="icon" width="38" height="39"><span>社团</span></div>
                        <ul class="menu">
                            <li v-for="(item, index) in community" :key="index" :class="{active: item.checked}">{{item.name}}</li>
                        </ul>
                        <div class="detail"><span><i class="fa fa-refresh"></i>换一批</span><a href="#">进去逛逛<i class="fa fa-angle-right"></i></a></div>
                    </h2>
                    <ul class="list">
                        <li v-for="item in 10" >
                            <a href="#">
                                <div class="img-contet">
                                    <img src="../public/img/temp3.jpg" alt="">
                                    <div class="info">
                                        <img src="../public/img/temp1.png" alt="">
                                        <span>ちょこ庵</span>
                                    </div>
                                </div>
                                <p class="description">えっちゃん本気もーどえっちゃん本気もーどえっちゃん本気もーど</p>
                                <div class="view-comments">
                                    <span class="view"><i></i>3213</span>
                                    <span class="comments"><i></i>61</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="right-content ranking-content">
                    <h2 class="img-title">摸鱼部<b class="ranking">排行榜</b><div class="data"><span class="active">今日</span><span>本周</span></div></h2>
                    <ul class="list">
                        <li v-for="item in 5">
                            <a href="#" v-if="item <= 3">
                                <dl>
                                    <dt :data-num="item"><img src="../public/img/temp3.jpg" alt=""></dt>
                                    <dd>
                                        <h6>拥有多职业改动！魔兽世界PTR7.2.5官方补丁说明</h6>
                                        <div>UP:水树奈奈</div>
                                        <div class="view-comments"><span class="view"><i></i>3213</span> <span class="comments"><i></i>61</span></div>
                                    </dd>
                                </dl>
                            </a>
                            <a href="http://www.baidu.com" v-else><p :data-num="item">身材略过丰满 《闪乱神乐：沙滩戏水》索尼身材略过丰满 《闪乱神乐：沙滩戏水》索尼</p></a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 学部 -->
            <div class="division">
                <div class="left-content">
                    <h2>
                        <div class="title"><img src="../public/img/icon-division.png" alt="" class="icon" width="33" height="34"><span>学部</span></div>
                        <ul class="menu">
                            <li
                                v-for="(item,key) in division"
                                :key="key"
                                :class="{active: item.checked}"
                                @click="switchMenu(item.name,key)">
                                {{ item.name }}
                            </li>
                        </ul>
                        <div class="detail"><span><i class="fa fa-refresh"></i>换一批</span><a href="#">进去逛逛<i class="fa fa-angle-right"></i></a></div>
                    </h2>
                    <ul class="list" v-for="item in division" v-show="item.checked">
                        <li v-for="data in item.data" >
                            <a href="#">
                                <div class="img-contet">
                                    <image-item :src="data.icon.path" ></image-item>
                                    <div class="info">
                                        <image-item :src="data.headIcon" ></image-item>
                                        <span>{{ data.username }}</span>
                                    </div>
                                </div>
                                <p class="description">{{ data.title }}</p>
                                <div class="view-comments">
                                    <span class="view"><i></i>{{ data.comments }}</span>
                                    <span class="comments"><i></i>{{ data.likes }}</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="right-content">
                    <h2 class="img-title" v-for="item in division" v-if="item.checked">{{item.name}}<b class="ranking">排行榜</b><div class="data"><span class="active">今日</span><span>本周</span></div></h2>
                    <ul class="list">
                        <li v-for="item in 5">
                            <a href="#" v-if="item <= 3">
                                <dl>
                                    <dt :data-num="item"><img src="../public/img/temp3.jpg" alt=""></dt>
                                    <dd>
                                        <h6>拥有多职业改动！魔兽世界PTR7.2.5官方补丁说明</h6>
                                        <div>UP:水树奈奈</div>
                                        <div class="view-comments"><span class="view"><i></i>3213</span> <span class="comments"><i></i>61</span></div>
                                    </dd>
                                </dl>
                            </a>
                            <a href="http://www.baidu.com" v-else><p :data-num="item">身材略过丰满 《闪乱神乐：沙滩戏水》索尼身材略过丰满 《闪乱神乐：沙滩戏水》索尼</p></a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 书包 -->
            <div class="school-bag">
                <div class="left-content">
                    <h2>
                        <div class="title"><img src="../public/img/icon-bag.png" alt="" class="icon" width="30" height="36"><span>书包</span></div>
                        <div class="detail"><span><i class="fa fa-refresh"></i>换一批</span><a href="#">进去逛逛<i class="fa fa-angle-right"></i></a></div>
                    </h2>
                    <ul class="list">
                        <li v-for="item in 10" >
                            <a href="#">
                                <div class="img-contet">
                                    <img src="../public/img/temp3.jpg" alt="">
                                    <i class="type">{{'类别'+item}}</i>
                                    <div class="price-nums">
                                        <span class="price">20节操</span>
                                        <span class="nums">48项</span>
                                    </div>
                                </div>
                                <p class="description">えっちゃん本気もーどえっちゃん本気もーどえっちゃん本気もーど</p>
                                <div class="view-comments">
                                    <span class="view"><i></i>3213</span>
                                    <span class="comments"><i></i>61</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="right-content ">
                    <h2 class="img-title">书包<b class="ranking">排行榜</b><div class="data"><span class="active">今日</span><span>本周</span></div></h2>
                    <ul class="list">
                        <li v-for="item in 5">
                            <a href="#" v-if="item <= 3">
                                <dl>
                                    <dt :data-num="item"><i class="type">{{'类别'+item}}</i><img src="../public/img/temp3.jpg" alt=""></dt>
                                    <dd>
                                        <h6>拥有多职业改动！魔兽世界PTR7.2.5官方补丁说明</h6>
                                        <div>UP:水树奈奈</div>
                                        <div class="view-comments"><span class="view"><i></i>3213</span> <span class="comments"><i></i>61</span></div>
                                    </dd>
                                </dl>
                            </a>
                            <a href="http://www.baidu.com" v-else><p :data-num="item">身材略过丰满 《闪乱神乐：沙滩戏水》索尼身材略过丰满 《闪乱神乐：沙滩戏水》索尼</p></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- footer -->
        <public-footer></public-footer>
        <i class="back-top" @click="scrollTop()"> <img src="../public/img/back-top.png" alt=""> </i>
    </div>
    <script src="../public/js/jquery-1.11.1.min.js"></script>
    <script src="../public/js/underscore.js"></script>
    <script src="../public/js/swiper-4.2.6.min.js"></script>
    <script src="../public/js/vue.js"></script>
    <script src="../public/components/components.js"></script>
    <script src="../public/js/com.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                header:{
                    loginStatus: true,
                    index: 1,
                },
                banner: null,
                topDoc: null,
                includes: null,
                contribution: null,
                community:[
                    {name: '摸鱼部', checked: true, data:null},
                    {name: 'COS', checked: false, data:null},
                    {name: '绅士', checked: false, data:null},
                    {name: '自拍', checked: false, data:null},
                    {name: '手绘', checked: false, data:null},
                    {name: '新番讨论', checked: false, data:null},
                    {name: '游戏综合', checked: false, data:null}
                ],
                division:[
                    {name: '新闻部', checked: true, data:null},
                    {name: '美图部', checked: false, data:null},
                    {name: '游戏部', checked: false, data:null},
                    {name: '图书馆', checked: false, data:null},
                    {name: '影音部', checked: false, data:null},
                    {name: '茶话部', checked: false, data:null},
                    {name: '小卖部', checked: false, data:null}
                ],
            },
            methods: {
                //回到顶部
                scrollTop: function(){
                    window.scroll(0,0);
                },
                //切换菜单
                switchMenu: function(name,key){
                    _.each(vm.division, function (item, index) {
                        item.checked = false;
                    });
                    vm.division[key].checked = true;
                },
                //banner
                getBanner: function () {
                    $.ajax({
                        url: "http://2333.moemoe.la/api/classroom/banner",
                        dataType: 'json',
                        data:{"room":'CLASSROOM'},
                        success: function (data) {
                            vm.banner = data.data;
                            _.each(vm.banner, function (item, index) {
                                item.schema = item.schema.substr(item.schema.lastIndexOf('?') + 1);
                            });
                        }
                    });
                },
                //推荐
                getTopDoc: function(){
                    $.ajax({
                        url: "http://2333.moemoe.la/api/index/topDoc",
                        dataType: 'json',
                        success: function (data) {
                            vm.topDoc = [...data.data.leftList, ...data.data.rightList];
                        }
                    });
                },
                //板报
                getIncludes: function(){
                    $.ajax({
                        url: "http://2333.moemoe.la/api/cal/blackboard/list",
                        dataType: 'json',
                        data:{'index':0,'size':10},
                        success: function (data) {
                            vm.includes = data.data;
                        }
                    });
                },
                //贡献
                getContribution: function(){
                    $.ajax({
                        url: "http://2333.moemoe.la/api/index/topUser",
                        dataType: 'json',
                        success: function (data) {
                            vm.contribution = data.data;
                        }
                    });
                },
                //学部
                getDivision: function(){
                    //新闻部
                    $.ajax({
                        url: "http://2333.moemoe.la/api/cal/docs",
                        dataType: "json",
                        data: {
                            'index': 0,
                            'size': 10,
                            'roomId': '26f9831a-5f7f-11e6-8f94-d0a637eac7d7',
                            'before': '20180607160412',
                        },
                        success: function(data){
                            vm.division[0].data = data.data.list;
                        }
                    });
                    //美图部
                    $.ajax({
                        url: "http://2333.moemoe.la/api/cal/docs",
                        dataType: "json",
                        data: {
                            'index': 0,
                            'size': 10,
                            'roomId': 'be39718c-5f7f-11e6-81f9-d0a637eac7d7',
                            'before': '20180607160412',
                        },
                        success: function(data){
                            vm.division[1].data = data.data.list;
                        }
                    });
                },
            },
            mounted() {
                let _this = this;
                _this.getBanner();
                _this.getTopDoc();
                _this.getIncludes();
                _this.getContribution();
                _this.getDivision();
                console.log(_this._data)
            },
            updated(){
                new Swiper('.swiper-container', {
                    autoplay: {
                        delay: 5000,
                        disableOnInteraction: false,
                    },
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    effect : 'flip',
                });
            },
            // computed:{

            // },
            // watch: {
            //     banner: function(){
            //         new Swiper('.swiper-container', {
            //             slidesPerView: 1,
            //             spaceBetween: 30,
            //             autoplay: {
            //                 delay: 3000,
            //                 stopOnLastSlide: false,
            //                 disableOnInteraction: true,
            //             },
            //             loop: true,
            //             pagination: {
            //                 el: '.swiper-pagination',
            //                 clickable: true,
            //             },
            //         });
            //     }
            // },
        });
    </script>
</body>
</html>